@extends('admin.layouts.app')
@section('css')
<link href="{{asset('assets/plugins/switchery/css/switchery.min.css')}}" rel="stylesheet" />

<link href="{{asset('assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css')}}" rel="stylesheet">
@endsection
@section('content')
@include('vendor.ueditor.assets')

    <!-- Page-Title -->
    <div class="row">
        <div class="col-sm-12">
            <h4 class="page-title">平台管理</h4>
            <ol class="breadcrumb">
                <li><a href="{{url('zadmin/')}}">系统</a></li>
                <li><a href="{{url('zadmin/product')}}">商品管理</a></li>
                <li class="active">添加商品</li>
            </ol>
        </div>
    </div>

                        
    <div class="row">
        <div class="col-lg-12">
            <div class="card-box">
                <h2 class="m-t-0 header-title">添加商品</h2>
                    <hr/>
                    @include('admin.common.error')
                    <div class="row">
                        <div class="col-md-9">
                            <form class="form-horizontal" role="form" action="{{url('zadmin/products/save')}}" method="post" enctype="multipart/form-data">
                                <div class="form-group">
                                  <label class="col-md-2 control-label">商品名</label>
                                  <div class="col-md-10">
                                      <input type="text" class="form-control" name="name" required="" value="" >
                                  </div>
                              </div>
                                <div class="form-group">
                                    <label class="col-md-2 control-label">吊牌价</label>
                                    <div class="col-md-4">
                                      <input type="text" class="form-control" name="market_price" required="" value="" >
                                    </div>
                                    <label class="col-md-2 control-label">零售价</label>
                                    <div class="col-md-4">
                                        <input type="text" class="form-control" name="price" required="" value="" >
                                    </div>
                              </div>

                                <div class="form-group">
    <label class="col-md-2 control-label">分类</label>
        <div class="col-md-10">
          <select class="form-control" name="cate_id">
              <option value="">请选择</option>
              @foreach($cates as $cate)
                            <option value="{{$cate->id}}">{{$cate->name}}</option>
                    @endforeach
              </select>
                                              </div>
      </div>
                                <div class="form-group">
                                <label class="col-md-2 control-label">首页推荐</label>
                                <div class="col-md-10">
                                    <select  class="form-control" name="is_rec" required="" >
                                      <option value="0">不推荐</option>
                                      <option value="1">推荐</option>
                                    </select>
                              </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-2 control-label">库存总量</label>
                                <div class="col-md-10">
                                    <input  class="form-control" name="store_num" required="" />
                                     
                                    
                              </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-2 control-label">截止时间</label>
                                <div class="col-md-10">
                                    <input  class="form-control datetimepicker" name="end_at" required="" />
                                     
                                    
                              </div>
                            </div>


                            <div class="form-group">
                            <label class="col-md-2 control-label">简述</label>
                            <div class="col-md-10">
                              <textarea  class="form-control" name="remark" ></textarea></div>
                            </div>


                                <div class="form-group">
                            <label class="col-md-2 control-label">介绍</label>
                                <div class="col-md-10">
                                <!-- 实例化编辑器 -->
                                <script type="text/javascript">
    var ue = UE.getEditor('container');
    ue.ready(function() {
    ue.execCommand('serverparam', '_token', '{{ csrf_token() }}'); // 设置 CSRF token.
    });

    </script>
                            <!-- 编辑器容器 -->
                            <script id="container" name="contents" type="text/plain"></script>
                          </div>
                        </div>
            <div class="form-group">
                                <label class="col-md-2 control-label">首页图片</label>
                                <div class="col-md-10">
                                    <input type="file"  class="form-control" name="home_thumb" required="" />
                                     
                                    
                              </div>
                            </div>


            <div class="form-group">
                <label class="control-label col-md-2">上传图片</label>
                <div class="col-sm-10">
                  <div id="filelist"></div>

</script>

<!-- 编辑器容器 -->
<script id="container" name="contents" type="text/plain"></script>
              </div>
            </div>        
<div class="form-group">
           
            <label class="col-md-2 control-label">规格</label>
            <div class="col-md-10">
              <input type="checkbox"  data-plugin="switchery" data-color="red" data-secondary-color="green" id="openspec"  name="has_spec" checked=""    />
           
              <table class="table spec-table" style="display: none">
              <tr>  
                <th>规格名</th>
                <th>价格</th>
                
                <th>操作</th>
              </tr> 
              <tr class="spec-tr">
              <td> 
                <input class="form-control" type="text" value="" name="spec_name[]" />
              </td>
              <td>
                <input class="form-control" type="text" value="" name="spec_price[]" />
              </td>
             
              <td>
                <button class="btn btn-info btn-sm spec-add" type="button">添加</button>
                <button class="btn btn-danger btn-sm spec-del" type="button">删除</button>
              </td>
              </tr> 
            </table> 
            </div>
  </div>


            <div class="form-group">
                <label class="control-label col-md-2">上传图片</label>
                <div class="col-sm-10">
                  <div id="filelist"></div>

                  <div class="piclist"></div>

                <button class="btn" type="button" id="pickfiles">选择图片</button>
              </div>


            </div>
                                <div class="form-group text-center">
                                <button type="submit" class="btn btn-info waves-effect waves-light">保存</button>
                                </div>
                                {{csrf_field()}}
                                <input  id="pics" name="pics" type="hidden">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
    </div>
@endsection
                        

    
  @section('js')
  <script type="text/javascript" src="/js/plupload.full.min.js"></script>
  <script type="text/javascript" src="{{asset('assets/plugins/switchery/js/switchery.min.js')}}"></script>
  <script src="{{asset('assets/plugins/moment/moment-with-locales.js')}}"></script>  
  <script src="{{asset('assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js')}}"></script>

        <script type="text/javascript">
          var pics = '';
          var uploader = new plupload.Uploader({
              runtimes : 'html5,flash,silverlight,html4',
              browse_button : 'pickfiles',               
              url : '/upload.php',
              flash_swf_url : '../js/Moxie.swf',
              silverlight_xap_url : '../js/Moxie.xap',
              
              filters : {
                max_file_size : '10mb',
                mime_types: [
                  {title : "Image files", extensions : "jpg,gif,png"},
                  {title : "Zip files", extensions : "zip"}
                ]
              },

              init: {
                PostInit: function() {
                  $('#filelist').html('');

                  
                },

                FilesAdded: function(up, files) {
                  plupload.each(files, function(file) {
                    $('#filelist').html('<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>');
                     uploader.start();
                     return false;
                  });
                },

               

                 FileUploaded: function(up, file, info) {
                    // Called when file has finished uploading
                    var rs =  JSON.parse(info.response);
                    if(rs.status){
                      var str = '<img style="padding:5px" src="'+rs.data+'" width="100">';
                      $('.piclist').append(str);
                      pics += rs.data+',';
                      $('#pics').val(pics);
                    }
                    console.info(rs);                              
                },
              }
          });
      uploader.init();


      $('#openspec').on('change',function(){
        var val = $(this).prop('checked');
           
        if(val==false) {
          $('.spec-table').show();
              
        } else {
          $('.spec-table').hide();
        }
         
      })

       $(document).on('click','.spec-add',function(){
         var _tr = $('.spec-tr:first').clone();
         $('.spec-table').append(_tr);
       })

       $(document).on('click','.spec-del',function(){
         var _length = $('.spec-tr').length;
         if(_length==1) return ;
         console.info(_length);
         $(this).parents('tr').remove();
       })

       $('.datetimepicker').datetimepicker({
                    locale: 'zh-cn',
                    format: 'YYYY-MM-DD HH:mm',    
          });;
        </script>
        
        @endsection
    
